<template>
	<div class="box">
		<div class="null-page" v-show="yes"></div>
		
		<div class="member-info" v-loading="loading" v-show="!isReal">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane :label="$t('member.info.basicInfo') " name="first">
					<el-form ref="infoRef" :model="memberInfo" :rules="infoRules" label-width="80px">
                        <el-form-item :label="$t('member.info.nickname') " prop="nickName"><el-input v-model="memberInfo.nickName"></el-input></el-form-item>
                        <el-form-item :label="$t('member.info.nationality') " >
                            <p> {{ $t('member.info.insideChina') }}</p>
                        </el-form-item>
                        <el-form-item :label="$t('member.info.idNumber') ">
                            <p>{{ memberInfo.member_id }}</p>
                        </el-form-item>
                        <el-form-item :label="$t('member.info.phoneNumber') ">
                            <div style="display: flex; align-items:center;">
                                <p >{{ memberInfo.tell ? memberInfo.tell : '/' }}</p>
                                <p style="margin-left: 20px;" v-if="memberInfo.tell" class="toBind" @click="$router.push({ path: '/member/security' })">
                                     {{ $t('member.info.updateNumber') }}
                                </p>
                            </div>
                        </el-form-item>
                        <el-form-item :label="$t('member.info.mailbox') ">
                            <div class="form-item">
                                <div style="display: flex; align-items:center;">
                                    <p >{{ memberInfo.email ? memberInfo.email : '/'}}</p>
                                    <!-- <p v-else class="toBind" @click="$router.push({ path: '/member/security' })">去绑定</p> -->
                                    <p style="margin-left: 20px;" v-if="memberInfo.email" class="toBind" @click="$router.push({ path: '/member/security' })">
                                         {{ $t('member.info.untie') }}
                                    </p>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item :label="$t('member.info.level') " >
                            <p>{{memberInfo.member_level_name}}</p>
                        </el-form-item>
                        <el-form-item :label="$t('member.info.team') " >
                            <p>{{0}}</p>
                        </el-form-item>

<!--                        <el-form-item label="当前语言" >-->
<!--                            <p>中文</p>-->
<!--                        </el-form-item>-->

<!--						<el-form-item label="账号" v-if="memberInfo.username">-->
<!--							<p>{{ memberInfo.username }}</p>-->
<!--						</el-form-item>-->
						<el-form-item :label="$t('member.info._verified') " >
							<p v-if="memberInfo.auth_status == 2"> {{ $t('member.info.verified') }}</p>
                            <p v-else-if="memberInfo.auth_status == 1"> {{ $t('member.info.pendingReview') }}</p>
                            <p v-else class="toBind" @click="isReal = !isReal"> {{ $t('member.info.goToCertification') }}</p>
						</el-form-item>

					</el-form>
					<div class="btn"><el-button size="medium" type="primary" @click="saveInfo"> {{ $t('member.info.save') }}</el-button></div>
				</el-tab-pane>
				<el-tab-pane :label="$t('member.info.facialPhoto') " name="second">
					<div class="preview">
						<div class="title"> {{ $t('member.info.avatarPreview') }}</div>
						<div class="content">
							 {{ $t('member.info.tip') }}
							<br />
							 {{ $t('member.info.tip1') }}
						</div>
					</div>
					<el-upload :action="uploadActionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" class="upload">
						<div class="img-wrap">
                          <img :src="$img(memberInfo.userHeadImg)" @error="memberInfo.userHeadImg = defaultHeadImage" /></div>
					</el-upload>
					<div class="btn"><el-button size="medium" type="primary" @click="uploadHeadImg"> {{ $t('member.info.save') }}</el-button></div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="member-real" v-loading="loading" v-show="isReal">
			<div class="member-title"> {{ $t('member.info._verified') }}</div>
			<div class="member-form">
				<el-form ref="realRef" :model="formObj" :rules="realRules" label-width="80px">
					<el-form-item :label="$t('member.info.nationality') " class="">
						<div class="form-label">
							<div class="compony" @click="showCounty = !showCounty">
								{{formObj.nationality?formObj.nationality: $t('member.info.selectNationality') }}
								<i class="el-icon-arrow-up" v-show="showCounty" style="color:#ccc;"></i>
								<i class="el-icon-arrow-down" v-show="!showCounty" style="color:#ccc;"></i>
							</div>
							<transition name="el-fade-in-linear">
								<div class="country-ul" v-show="showCounty">
									<div class="country-li" v-for="(obj,i) in countryAry" :key="i" @click.stop="setCountry(obj)">
										<div class="li-name">{{obj.name}}  <span style="color: #92969E;">+{{obj.tel}}</span></div>
									</div>
								</div>
							</transition>
						</div>
					</el-form-item>
					<el-form-item :label="$t('member.info.actualName') " class="" prop="real_name">
						<div class="form-label">
							<el-input style="width:360px;" v-model="formObj.real_name" :placeholder="$t('member.info.iTypeInYourName') "></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="$t('member.info.identityInfo') " class="" prop="id_num">
						<div class="form-label">
							<el-input style="width:360px;" v-model="formObj.id_num" :placeholder="$t('member.info.iIdCard') "></el-input>
						</div>
					</el-form-item>
					<div class="upload-form">
						<div class="left">
							<div class="title"> {{ $t('member.info.uploadDocuments') }}</div>
<!--							<div class="num">（≤5张)</div>-->
						</div>
						<div class="right">
							<div class="add-row" >
<!--								<div class="add-img img-wrap" v-for="(img,k) in imgAry" :key="k">-->
<!--									<img :src="img" alt="">-->
<!--									<div class="close" @click.stop="imgAry.splice(k,1)"><i class="el-icon-close"></i></div>-->
<!--								</div>-->
                                <el-row :gutter="26" type="flex" justify="center">
                                    <el-col>
                                        <el-upload
                                            v-loading="loadingFront"
                                            class="add-img upload-card"
                                            :action="$config.baseUrl+'/api/upload/image'"
                                            :show-file-list="false"
                                            :on-progress="()=>this.loadingFront = true"
                                            :on-success="
											(file, fileList) => {
												return hanleImgs(file, 'img_front');
											}
										"
                                        >
<!--                                            <i class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                                            <span>上传证件</span>-->
                                            <img class="card-img" v-if="formObj.img_front" :src="formObj.img_front" alt="">
                                            <img class="card-img" v-else src="@/assets/images/id_card_zhengmian.png" :alt="$t('member.info.positive') ">
                                        </el-upload>
                                        <span class="card-title"> {{ $t('member.info.positive') }}</span>
                                    </el-col>
                                    <el-col>
                                        <el-upload
                                            v-loading="loadingReverse"
                                            class="add-img upload-card"
                                            :action="$config.baseUrl+'/api/upload/image'"
                                            :show-file-list="false"
                                            :on-progress="()=>this.loadingReverse = true"
                                            :on-success="
											(file, fileList) => {
												return hanleImgs(file, 'img_reverse');
											}
										"
                                        >
                                            <!--                                            <i class="el-icon-plus avatar-uploader-icon"></i>-->
                                            <!--                                            <span>上传证件</span>-->
                                            <img class="card-img" v-if="formObj.img_reverse" :src="formObj.img_reverse" alt="">
                                            <img class="card-img" v-else src="@/assets/images/id_card_fanmian.png" :alt="$t('member.info.obverse') ">
                                        </el-upload>
                                        <span class="card-title"> {{ $t('member.info.obverse') }}</span>
                                    </el-col>
                                </el-row>
							</div>
						</div>
					</div>
				</el-form>
				<div class="footer-btn">
					<div class="btn"><el-button size="medium" type="primary" @click="saveReal()"> {{ $t('member.info.save') }}</el-button></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { info, nickName, headImg,countryFn,realFn } from '@/api/member/info';
import Config from '@/utils/config';
import { mapGetters } from 'vuex';
import { email } from '@/api/member/security';
export default {
	name: 'info',
	components: {},
	data: () => {
		return {
			memberInfo: {
				userHeadImg: '',
				userName: '', //账号
				nickName: '', //昵称
				email: '',
				tell: '',
                auth_status: 0,
			},
			infoRules: {
				nickName: [{ required: true, message: '', trigger: 'blur' },
                    { max: 30, message: '', trigger: 'blur' }]
			},
			realRules: {
				real_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				id_num: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
			},
			activeName: 'first',
			loading: true,
			uploadActionUrl: Config.baseUrl + '/api/upload/headimg',
			imgUrl: '',
			yes: true,
			isReal: false,
			showCounty: false,
			countryAry: [],
			imgAry: [],
			formObj: {
				real_name: '',
				id_num: '',
                img_front: '',
                img_reverse: '',
				nationality: '', // 国籍
			},
            loadingFront: false,
            loadingReverse: false,
		};
	},
	created() {

	    this.infoRules.nickName = [
	        { required: true, message: this.$t('member.info.iANickname'), trigger: 'blur' },
            { max: 30, message: this.$t('member.info.maximumLengthIs30'), trigger: 'blur' }
        ];
        this.realRules.real_name= [{ required: true, message:this.$t('member.info.iTypeInYourName'), trigger: 'blur' }],
        this.realRules.id_num= [{ required: true, message: this.$t('member.info.iIdCard'), trigger: 'blur' }],

		this.getInfo();
		this.getCountry();
	},
	mounted() {
		let self = this;
		setTimeout(function() {
			self.yes = false
		}, 300)
	},
	methods: {
		// 获取国籍
		setCountry(obj){
			this.formObj.nationality = obj.name;
			this.showCounty = false;
		},
		// 保存实名
		saveReal(){
			this.$refs.realRef.validate(valid => {
				console.log(valid)
				if (valid) {
					if(!this.formObj.nationality){
						return this.$message.error(this.$t('member.info.selectNationality'));
					}

                    if(!this.formObj.img_front || !this.formObj.img_reverse){
                        return this.$message.error(this.$t('member.info.uploadIDPhoto'));
                    }
					// if(this.imgAry.length == 0){
					// 	return this.$message.error('请上传证件照片');
					// }
					this.formObj.images = this.imgAry.join(',')
					console.log(JSON.stringify(this.formObj))
					realFn(this.formObj).then(res=>{
						if(res.code == 0){
							this.$message({ message: this.$t('member.info.submittedSuccess'), type: 'success' });
							this.$router.replace({name: 'member'})
						}
					}).catch(err=>{
						this.$message.error(err.message);
					})
				} else {
					return false;
				}
			});
		},
		hanleImgs(res, type) {
			let img = res.data.pic_path;
			if (type === 'img_front'){
			    this.formObj.img_front = img;
			    this.loadingFront = false;
            }else if (type === 'img_reverse'){
                this.formObj.img_reverse = img;
                this.loadingReverse = false;
            }
            // console.log(img)
            // this.imgAry.push(img);
		},
		getCountry(){
			countryFn().then(res=>{
				if(res.code == 0){
					this.countryAry = res.data;
				}
			})
		},
		getInfo() {
			info()
				.then(res => {
					if (res.code == 0) {
						this.memberInfo = res.data;
						this.memberInfo.userHeadImg = res.data.headimg;
						this.memberInfo.userName = res.data.username;
						this.memberInfo.nickName = res.data.nickname;
						this.memberInfo.email = res.data.email;
						this.memberInfo.tell = res.data.mobile;
                        this.memberInfo.auth_status = res.data.auth_status;

                    }
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
					this.$message.error(err.message);
				});
		},
		handleClick(tab, event) {},
		saveInfo() {
			this.$refs.infoRef.validate(valid => {
				if (valid) {
					nickName({ nickname: this.memberInfo.nickName })
						.then(res => {
							if (res.code == 0) {
								this.$message({ message: this.$t('member.info.succeeNickname'), type: 'success' });
								this.getInfo;
								this.$store.dispatch('member/member_detail', { refresh: 1 });
							}
						})
						.catch(err => {
							this.$message.error(err.message);
						});
				} else {
					return false;
				}
			});
		},
		handleAvatarSuccess(res, file) {
			this.imgUrl = res.data.pic_path;
			this.memberInfo.userHeadImg = URL.createObjectURL(file.raw);
		},
		uploadHeadImg() {
			headImg({ headimg: this.imgUrl })
				.then(res => {
					if (res.code == 0) {
						this.$message({ message: this.$t('member.info.avatarModifiedSuccess'), type: 'success' });
						this.$store.dispatch('member/member_detail', { refresh: 1 });
					}
				})
				.catch(err => {
					this.$message.error(err.message);
				});
		}
	},
	computed: {
		...mapGetters(['defaultHeadImage'])
	}
};
</script>
<style>
.member-info .el-upload {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.member-real .el-upload {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

</style>
<style lang="scss" scoped>
.box {
	width: 100%;
	position: relative;
}

.null-page {
	width: 100%;
	height: 730px;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

.member-info {
	background: #ffffff;
	padding: 20px;
	.el-tab-pane {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		.preview {
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			.title {
				margin-right: 20px;
				line-height: 3;
			}
			.content {
				color: $base-color;
				line-height: 1.5;
			}
		}
		.upload {
			display: flex;
			justify-content: center;
		}
		.el-upload {
			width: 120px;
		}
		.img-wrap {
			width: 120px;
			height: 120px;
			display: block;
			line-height: 120px;
			overflow: hidden;
			border: 1px solid #f1f1f1;
			cursor: pointer;
			img {
				display: inline-block;
			}
		}
		.el-form {
			margin-top: 20px;
			width: 500px;
			margin-left: 200px;
			.el-form-item {
				margin-bottom: 10px;
			}
			.toBind {
				cursor: pointer;
				color: $base-color;
				// &:hover {
				// 	color: $base-color;
				// }
			}
		}
		.btn {
			text-align: center;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

}

.member-real {
	background: #ffffff;
	.member-title {
		width: 100%;
		padding: 18px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #DCDFE6;
	}
	.member-form {
		width: 100%;
		padding: 0px 35px;
		box-sizing: border-box;
		.el-form-item {
			margin-bottom: 0px;
			padding-top: 22px;
		}
		.form-label {
			margin-left: 10px;
			position: relative;
			.compony {
				color: #FF547B;
				width: 360px;
				height: 40px;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 15px;
				box-sizing: border-box;
			}
			.country-ul {
				position: absolute;
				left: 0px;
				top: 40px;
				width: 360px;
				height: 300px;
				overflow: auto;
				background-color: rgb(255, 255, 255);
    		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
				z-index: 11;
				.country-li {
					padding: 0px 16px;
					box-sizing: border-box;
				}
				.country-li:hover {
					background: #F7F7F7;
					.li-name {
						color: #FF547B;
					}
				}
			}
		}
		.upload-form {
			padding-top: 22px;
			display: flex;
			// align-items: center;
			.left {
				width: 80px;
				.title {
					text-align: right;
					font-size: 14px;
    			color: #606266;
					line-height: 40px;
					padding-right: 12px;
				}
				.num {
					font-size: 12px;
					color: #FF547B;
					text-align: center;
				}
			}
			.right {
				margin-left: 10px;
				.add-row {
					display: flex;
					align-items: center;
					.add-img {
						width: 88px;
						height: 88px;
						border-radius: 3px;
						border: 1px dashed #C0BEB9;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						margin-right: 12px;
						.el-icon-plus {
							color: #C0BEB9;
							font-size: 40px;
						}
						span {
							padding-top: 7px;
							font-size: 12px;
							color: #C0BEB9;
							line-height: 20px;
						}
					}
					.img-wrap {
						position: relative;
						img {
							width: 76px;
							height: 76px;
						}
						.close {
							width: 16px;
							height: 16px;
							background: #FF4543;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							right: -8px;
							top: -8px;
							.el-icon-close {
								font-size: 10px;
								color: #fff;
							}
						}
					}
				}
			}
		}
		.footer-btn {
			text-align: center;
			padding: 185px 0px 30px;
		}
	}

    .el-form{
        width: 500px;
        margin: 0 auto;
    }
    .upload-card{
        overflow: hidden;
        width: 164px!important;
        height: 105px!important;
        margin-right: 0px!important;
        .el-upload{
           @extend .w100;
            img{
                @extend .w100;
            }
        }
    }

    .w100{
        width: 100%;
        height: 100%;
    }
    .card-title{
        width: 100%;
        height: 20px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #92969E;
        line-height: 20px;
        display: block;
        text-align: center;
    }
}

</style>
